<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="el-card__header" v-show="this.$route.query.id">
        <!-- 面包屑导航 -->
        <el-breadcrumb  separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{this.$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 表单 -->
      <el-form ref="form"  label-width="80px">
        <el-row>
          <!-- 搜索框 -->
          <el-col :span="18">
            <el-col :span="4">
            <el-form-item  label="标签名称" >
              <el-input  v-model="searchValue"></el-input>
            </el-form-item>
            </el-col>
            <!-- 状态选择器 -->
            <el-col :span="4">
              <el-form-item  label="状态">
                <el-select @change="selectChange" v-model="stateValue" placeholder="请选择" >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 搜索清除按钮 -->
            <el-col :span="5">
              <el-form-item>
                <el-button size="small" @click="onClear">清除</el-button>
                <el-button type="primary" @click="onSubmit" size="small">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="6" style="text-align: right;">
             <!-- 返回学科按钮 -->
            <el-button icon="el-icon-back" type="text" v-show="this.$route.query.id" @click="$router.back()">返回学科</el-button>
            <!-- 新增标签按钮 -->
            <el-button size="small" type="success" @click="onAdd">
              <i class="el-icon-edit"></i>
              新增标签
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 消息提示 -->
      <el-alert
        :title="'数据一共'+total+'条'"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        :header-cell-style="tableHeaderStyle"
        style="width: 100%">
         <el-table-column
          type="index"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科">
        </el-table-column>
        <el-table-column
          prop="tagName"
          label="标签名称">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者">
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期">
          <template slot-scope="{row}">
              {{ row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
          <template slot-scope="{row}">
            {{row.state===1?'已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="{row}">
            <!-- {{row}} -->
            <el-button type="text" @click="onChange(row)">
              <!-- {{row.state===1?'禁用':'启用'}} -->
              <span v-if="row.state===0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button type="text" @click="onEdit(row)" :disabled="row.state===1" >修改</el-button>
            <el-button type="text" @click="onDelete(row.id)" :disabled="row.state===1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :current-page="page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; text-align: right;">
      </el-pagination>
      <!-- 添加标签对话框 -->
      <tags-add
        v-model="addDialogVisible"
        @add-success="loadTagsList"
        @edit-success="loadTagsList"
        @reset="row={}"
        :row="row"
      />
    </el-card>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import tagsAdd from '../components/tags-add.vue'
import { status } from '@/api/hmmm/constants.js'

export default {
  components: { tagsAdd },
  data () {
    return {
      tableData: [],
      page: 1,
      pagesize: 10,
      addDialogVisible: false,
      total: 0,
      searchValue: '',
      subjectId: 0,
      deleteDialogVisible: false,
      state: '',
      stateValue: null,
      row: {},
      options: status,
      subjectID: this.$route.query.id
    }
  },
  created () {
    this.loadTagsList()
  },
  methods: {
    // 加载标签列表
    async loadTagsList () {
      if (!this.$route.query.id) {
        this.subjectID = null
      }
      const res = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectID: this.$route.query.id,
        tagName: this.searchValue,
        state: this.stateValue
      })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 新增标签
    onAdd () {
      this.addDialogVisible = true
    },
    // 每页条数
    handleSizeChange (val) {
      this.pagesize = val
      this.loadTagsList()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      this.page = val
      this.loadTagsList()
    },
    // 清除
    onClear () {
      this.searchValue = ''
      this.stateValue = null
      this.loadTagsList()
    },
    // 选择器更改状态
    selectChange () {
      this.state = this.stateValue
    },
    // 搜索
    onSubmit () {
      this.loadTagsList()
    },
    // 修改标签
    onEdit (row) {
      this.addDialogVisible = true
      this.row = row
    },
    // 删除标签
    onDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log('点击了删除')
        await remove({ id })
        this.loadTagsList()
        this.$message.success('删除成功')
      }).catch(() => {

      })
    },
    // 修改状态
    async onChange (row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.loadTagsList()
    },
    // 表头高亮
    tableHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F5F7FA;color:#1f2d3d'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang='less'>
.box-card{
  margin: 10px;
  .el-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  /deep/.el-card__body {
    padding-top: 0px;
    .el-form{
    margin-top: 10px;
   }
  }
}
/deep/.el-table{
  margin-top: 20px;
  .el-icon-arrow-right:before{
    font-size: 0;
    display: none;
  }
}
/deep/.el-table th.el-table__cell>.cell{
  color: #909399;
}
</style>
